<template>
  <div class="attractions-box">
    <cardPanel title="景点介绍">
      <div class="attractions-content">
        <el-carousel height="220px">
          <el-carousel-item v-for="(item, index) in picList" :key="index">
            <img class="pic-item" :src="item" />
          </el-carousel-item>
        </el-carousel>

        <div class="attractions-text">
          芳桥风景灵秀，境内有阳山、葛宝山、架弓山、浮山、岱华山等九山伫立，阳山荡、下裴荡等四荡环绕，总面积为45平方公里，古来素有鱼米之乡之美誉，今朝更是安居之乐地、发展之沃土。
        </div>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
// 景点介绍
import cardPanel from "@/components/cardPanel/index.vue";
import pic1 from "@/assets/image/overview/pic1.jpg";
import pic2 from "@/assets/image/overview/pic2.jpg";
import pic3 from "@/assets/image/overview/pic3.jpg";
import pic4 from "@/assets/image/overview/pic4.jpg";

const picList = [pic1, pic2, pic3, pic4];
</script>

<style lang="scss" scoped>
.attractions-box {
  width: 360px;
  height: 59%;
}
.attractions-content {
  height: 100%;
}

.pic-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.attractions-text {
  height: calc(100% - 240px);
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 24px;
  text-align: justify;
  text-indent: 24px;
  overflow: auto;
  cursor: default;
}
</style>
